<template>
	<s-layout id="layout" :tabbarshow="false" navbar="normal" :title="state.title" :autoBack="true" leftIconColor="#333" :bgColor="'rgba(0,0,0,0)'" :titleStyle="{ color: '#fff', fontSize: '32rpx' }">
		<view id="app" :style="{ backgroundImage: backgroundImage, paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
			<!-- 搜索框 -->
			<view class="SearchBox">
				<s-search-keyword :placeholder="'搜索项目'" @searchKeyWord="searchKeyWord"></s-search-keyword>
			</view>
            <!-- @scrolltolower='listScrolltolower' -->
			<scroll-view ref="scroll" scroll-y class="list_bottom"
				v-if="companyNameDataList.length" show-scrollbar="true" :refresher-enabled="isOpenRefresh"
				:refresher-triggered="triggered" :refresher-threshold="100" refresher-background="white"
				@refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
				@refresherabort="onAbort" @scroll="onScroll">
				<view class="bottom_item" v-for="(item, index) in companyNameDataList" :key="index" @click="skip(item)">
					<image :src="`${baseUrl}/uploads/uniapp_image/user_v1/Contract_iconfile@2.png`"></image>
					<view class="text">
						<view class="filename">{{ item.title }}</view>
					</view>
				</view>
				<!-- <view>
					<s-loadmore-gather :current_page="companyNameCurrentPage" :last_page="companyNameLastPage" ref="loadmoreRef"></s-loadmore-gather>
				</view> -->
			</scroll-view>
			<u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容" marginTop="50%"></u-empty>
		</view>
	</s-layout>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import { baseUrl } from '@/sheep/config';
	import { formatFileSize } from '@/utils/fn.js';
	const { safeAreaInsets } = uni.getSystemInfoSync()
	const state =  ref({
		bgColor:'#fff',
		title:''
	})
	const status =  ref()//type 类型
    const backgroundImage = ref()
	onLoad((options) => {
		state.value.title = options.title 
		if( options.title =='业务合同'){
			status.value = 'contract'
            backgroundImage.value = `url( ${baseUrl}/uploads/uniapp_image/user_v1/yewuhetong_bg1@2.png)`
		}else if(options.title =='内部档案'){
			status.value = 'archives'
			backgroundImage.value = `url( ${baseUrl}/uploads/uniapp_image/user_v1/neibudangan_bg1@2.png)`
		}else if(options.title =='合同模版'){
			status.value = 'template'
            backgroundImage.value = `url( ${baseUrl}/uploads/uniapp_image/user_v1/hetongmuban_bg1@2.png)`
		}else if (options.title == '资质文件') {
            status.value = 'certificates'
            backgroundImage.value = `url( ${baseUrl}/uploads/uniapp_image/user_v1/zizhiwenjian_bg1@2.png)`
        }
		let params = {
			filter: JSON.stringify({
				type:status.value ,
			}),
			op: JSON.stringify({
				type: '=',
			}),
		};
		companyNameList(params);		
	});

	const loadmoreRef = ref()
	//公司选择
	//------------------ 公司名称开始-----------------------
	// 调用接口：获取项目列表
	const companyNameDataList = ref([])
    // const companyNameCurrentPage =  ref()
	// const companyNameLastPage = ref()
    // const  companyNamepage = ref(1)
	const companyNameList = async(params = null)=> {
		const res = await sheep.$api.contract.getContractCategoryList(params);
		companyNameDataList.value = [...companyNameDataList.value, ...res?.data];
		// companyNameCurrentPage.value = res.data.current_page;
		// companyNameLastPage.value = res.data.last_page;
	}

	// const listScrolltolower = () => {
    //     console.log(companyNameCurrentPage.value,companyNameLastPage.value);
    //     loadmoreRef.value.PopupScrolltolower()
    //     // console.log(companyNameCurrentPage.value,companyNameLastPage.value);
	// 	if (companyNameCurrentPage.value < companyNameLastPage.value) {
	// 		companyNamepage.value += 1;
	// 	} else {
	// 		return;
	// 	}
	// 	let params = {
	// 		page: companyNamepage.value,
	// 	};
	// 	companyNameList(params);
	// }
    //------------------ 公司名称结束-----------------------

    // // 搜索班次
	const searchKeyWord = (srarch_value) => {
		setTimeout(function() {
			companyNameDataList.value = []
            // companyNamepage.value = 1
			let params = {
				filter: JSON.stringify({
					'title': srarch_value,
					'type': status.value ,
				}),
				op: JSON.stringify({
					'title': 'LIKE',
					"type":"=",
				}),
				// page:companyNamepage.value,
			};
            companyNameList(params);
		}, 1000);
	};

   // 页面跳转详情
	const skip = (item) => {
		sheep.$router.go('/subpackage/staff/workbench/contract/contract_list', {
			category_id: item.id,
            // title:item.title
		});
	};
</script>

<style lang="scss" scoped>

	.app {
        width: 100%;
        height: auto;
    }

    ::v-deep .uni-popup__wrapper {
        flex: 1;
        width: 100vw !important;
    }

    .content {
        padding: 80rpx 40rpx 10rpx 40rpx;
        box-sizing: border-box;
        // height: 540rpx;
        width: 100%;

    .title {
        color: rgb(84, 119, 255);
        font-size: $uni-font-size-base;
        background-color: rgb(246, 248, 255);
        text-align: center;
        padding: 20rpx;
        border-radius: 10rpx;
    }

    .center {
        border-bottom: 1px solid #e5e5e5;
    }

    .text {
        color: rgb(153, 153, 153);
        font-size: $uni-font-size-base;
    }

    .bottom {
        display: flex;
        justify-content: space-between;
    }

    .btnArr {
        display: flex;
    }
    }

    .flex {
        display: flex;
        // margin-left: 10rpx;
    }

    .box_view {
        display: flex;

    image {
        width: 50rpx;
        height: 50rpx;
        margin-left: 10rpx;
        margin-top: 10rpx;
    }
    }

    .list_bottom {
        width: calc(100% - 40rpx);
        height: 68vh;
        margin: 0 auto;
        background: $uni-bg-color;
        border-radius: 20rpx;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
    }

    .bottom_item {
        margin: 40rpx 36rpx 0rpx 30rpx;
        display: flex;
        border-bottom: 2rpx solid #eee;
        align-items: center;
        padding-bottom: 40rpx;

        // &:last-child {
        //     border: none;
        // }

        image {
            width: 60rpx;
            height: 50rpx;
        }

        .text {
            width: 90%;
            margin-left: 40rpx;
            text-overflow: ellipsis;
            .filename {
                font-family: PingFangSC;
                color: $uni-text-color;
                font-weight: 500;
                font-size: $uni-font-size-base;
                margin-bottom: 10rpx;
            }
            .dates {
                font-family: PingFangSC;
                color: #666666;
                font-weight: 400;
                font-size: 24rpx;
            }
        }
    }


    // 搜索框
    .SearchBox {
        width: calc(100% - 40rpx);
        height: 72rpx;
        margin: 240rpx auto 20rpx auto;
    }

    // 弹出框
    .popup_box {
        width: 100%;
        height: 50%;
        background-color: $uni-bg-color;
        border-top-right-radius: 30rpx;
        border-top-left-radius: 30rpx;
        text-align: center;

        .title {
            width: 100%;
            height: 80rpx;
            line-height: 80rpx;
            background: #efefef;
            color: #333;
            font-size: $uni-font-size-base;
            border-top-right-radius: 30rpx;
            border-top-left-radius: 30rpx;
        }

        .name {
            width: 100%;
            height: 18vh;

            .list {
                width: 100%;
                height: 80rpx;
                line-height: 80rpx;
                background-color: $uni-bg-color;
                color: #666;
                font-size: 26rpx;
            }

            .list_loading {
                width: 100%;
                height: 80rpx;
                line-height: 80rpx;
                color: #999;
                font-size: 26rpx;
                background-color: $uni-bg-color;
                border-top: 1rpx solid #efefef;
            }
        }
    }

    .loading-text {
        text-align: center;
        font-size: $uni-font-size-base;
        color: #666;
        padding: 20rpx 0;
    }

    scroll-view ::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
    }
    page {
    width: 100%;
    height: 100%;
    }

    #app {
    background-size: 100%;
    width: 100%;
    min-height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    }
    :deep(.u-icon__icon) {
    background: #ffffff;
    width: 64rpx;
    height: 64rpx;
    justify-content: center;
    border-radius: 50%;
    }



</style>